<template>
  <view class="cart">
    <!-- 列表 -->
    <view class="cart-list">
      <view class="cart-item" v-for="(item, index) in cartList" :key="item.goods_id">
        <!-- 复选框 -->
        <view class="cart-chk">
          <checkbox-group @change="onGoodsCheck(index)">
            <checkbox :checked="item.checked"> </checkbox>
          </checkbox-group>
        </view>
        <!-- 商品图片 -->
        <view class="cart-img">
          <image mode="widthFix" :src="item.goods_small_logo"></image>
        </view>
        <!-- 商品详情 -->
        <view class="cart-detail">
          <view class="cart-goods-name u-line-2">{{ item.goods_name }}</view>
          <view class="cart-goods-info">
            <view class="goods-price">￥{{ item.goods_price }}</view>
            <view class="goods-num-tool">
              <!-- 切换其他的实现方式！！！  -->
              <view class="num-change" @click="onNumChange(-1, index)">-</view>
              <view class="num-value">{{ item.nums }}</view>
              <view class="num-change" @click="onNumChange(+1, index)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="cart-tool">
      <!-- 全选 -->
      <view class="all-checkbox">
        <checkbox-group @change="onAllCheck">
          <checkbox :checked="allChecked">全选</checkbox>
        </checkbox-group>
      </view>
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{ totalPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="go-pay" @click="onGoPay">去结算({{ totalNum }})</view>
    </view>
  </view>
</template>

<script>
  // mapState
  import { mapState, mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapState(['cartList']),
      ...mapGetters(['totalPrice', 'totalNum']),
      // 要结算的总数量
      totalNum() {
        let num = 0
        this.cartList.forEach(goods => {
          if (goods.checked) {
            num += goods.nums
          }
        })
        return num
      },
      // 购买的总价格
      totalPrice() {
        let price = 0
        this.cartList.forEach(goods => {
          if (goods.checked) {
            price += goods.nums * goods.goods_price
          }
        })
        return price
      },
      // 计算是否要显示全选
      allChecked() {
        // 数组中的每一个元素都选中  全选才是选中
        // 数组中的每一个元素都达到某个条件，  返回 true
        // 数组的方法 every！！！
        // 当数组是空数组的时候 every 返回值 true
        return this.cartList.length && this.cartList.every(goods => goods.checked)
      }
    },
    methods: {
      // 点击去结算按钮
      onGoPay() {
        // 判断用户有没有选中过商品
        if (this.totalNum === 0) {
          // 没有选中
          uni.showToast({ title: '您还没有选购商品', icon: 'none' })
          return
        }

        // 通过js的方式来跳转页面！！！
        uni.navigateTo({
          url: '/pages/pay/pay'
        })
      }, // 全选按钮
      onAllCheck() {
        // 获取当前全选按钮的选中状态  计算属性来拿
        // 取反
        const allChecked = !this.allChecked
        // 获取购物车数组 遍历 挨个修改商品的选中属性
        const cartList = this.cartList
        cartList.forEach(goods => (goods.checked = allChecked))

        this.$store.commit('setCartList', cartList)
      },
      // 商品的单选按钮
      onGoodsCheck(index) {
        const cartList = this.cartList
        // 取反
        cartList[index].checked = !cartList[index].checked
        // 新的数据 发送回vuex
        this.$store.commit('setCartList', cartList)
      },
      // 数量编辑
      async onNumChange(unit, index) {
        const cartList = this.cartList
        // 判断用户是否想要删除元素
        if (unit === -1 && this.cartList[index].nums === 1) {
          // 用户想要删除
          console.log('用户想要删除')
          const [err, result] = await uni.showModal({
            title: '提示',
            content: '您真得舍得删除吗?'
          })
          // 判断用户点击 删除还是取消
          if (result.confirm) {
            // 执行删除元素
            cartList.splice(index, 1)
            // 新的数据 发送回vuex
            this.$store.commit('setCartList', cartList)
          }
        } else {
          // 正常做数据的修改
          cartList[index].nums += unit // +1 || -1
          // 新的数据 发送回vuex
          this.$store.commit('setCartList', cartList)
        }
      }
    }
  }
</script>

<style lang="scss">
.cart {
  padding-bottom: 83rpx;
  .cart-list {
    padding: 15rpx;
    .cart-item {
      display: flex;
      .cart-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 80%;
        }
      }

      .cart-detail {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cart-goods-name {
          font-size: 26rpx;
          color: #666;
        }

        .cart-goods-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-size: 26rpx;
            color: #eb4450;
          }
        }
        .goods-num-tool {
          display: flex;

          .num-change {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            border: 1rpx solid #ccc;
            text-align: center;
            line-height: 34rpx;
            font-size: 26rpx;
            color: #666;
          }

          .num-value {
            height: 40rpx;
            margin: 0 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26rpx;
            color: #666;
          }
        }
      }
    }
  }
  .cart-tool {
    border-top: 1rpx solid #ccc;
    padding: 0 20rpx;
    display: flex;
    height: 83rpx;
    align-items: center;
    color: #666;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;

    .all-checkbox {
      width: 144rpx;
      font-size: 26rpx;
    }

    .all-price {
      flex: 1;
      font-size: 26rpx;
      text {
        color: #eb4450;
      }
    }

    .go-pay {
      padding: 0 20rpx;
      height: 52rpx;
      background-color: #ea4350;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 26rpx;
      font-size: 22rpx;
    }
  }
}
</style>